import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import { NavLink } from 'react-router-dom'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo,
    gameData: state.app.gameData
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    chooseCreateGame: (msg) => dispatch(global.allActions.groupActions.chooseCreateGame(msg))
  }
}

const GameBar = (props) => {
  const {gameData, confirmGame} = props
  return <div className="game-rule-bar pure-g">
    <div className="pure-u-3-4 v-center">
      <img className="bar-game-smaller" src={gameData.icon} alt=""/>
      <div className="game-tip mlr-3">
        <div>{gameData.name}</div>
        {/* <div>10局</div> */}
      </div>
    </div>
    <div className="pure-u-1-4 v-center">
      <img onClick={() => confirmGame(gameData)} style={{'width': '90%'}} src="img/groupNew/choose-game-btn.png" alt=""/>
    </div>
  </div>
}

class ChooseGame extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      gameQuery: ''
    }
  }
  
  public componentDidMount() {

  }

  confirmGame(gameData) {
    console.log(gameData);
    const gameDataCopy = _.cloneDeep(gameData)
    const payConf = gameDataCopy.config.find(conf => conf.key === 'payType')
    console.log('payConf', payConf)
    payConf.choice = [{
      label: 'AA支付',
      value: 1
    }, {
      label: '群主支付',
      value: 3
    }]
    payConf.selected = [1]
    this.props.chooseCreateGame(gameDataCopy)
    window.location.hash = 'RuleAdd'
  }

  gameQueryChange(e) {
    this.setState({gameQuery: _.trim(e.target.value)})
  }

  public render() {
    const {gameData} = this.props
    const {gameQuery} = this.state
    // const {groupName, tip, currentState} = this.state
    return <div className="view-page group-view">
      <div className="pure-g inner-header v-center">
        <input className="game-query" placeholder="游戏搜索" type="text" value={gameQuery} onChange={this.gameQueryChange.bind(this)}></input>
      </div>
      <div className="inner-body">
        <div className="rulelist-body-wrapper">
          {
            gameData.map((gameData, index) => {
              if (!gameData.name.match(gameQuery)) {
                return
              }
              return <GameBar key={index} gameData={gameData} confirmGame={this.confirmGame.bind(this)}></GameBar>
            })
          }
        </div>
      </div>
      <div className="inner-bottom">
        <div className="text vh-center"><span>选择游戏</span></div>
        <NavLink to="/GroupPlay"><img className="back" src="img/app/back.png" alt="" /></NavLink>
      </div>
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(ChooseGame)